<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Score Incrementer</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f4f4f9;
margin: 0;
padding: 0;
}
.container {
margin-top: 50px;
}
#score {
font-size: 48px;
font-weight: bold;
margin: 20px 0;
color: #007BFF;
}
#increment-btn {
padding: 15px 30px;
font-size: 18px;
font-weight: bold;
color: white;
background: linear-gradient(45deg, #ff416c, #ff4b2b);
border: none;
border-radius: 8px;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
transition: transform 0.2s, box-shadow 0.2s;
}
#increment-btn:hover {
transform: scale(1.1);
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3);
}
#increment-btn:active {
transform: scale(1);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
background: linear-gradient(45deg, #ff4b2b, #ff416c);
}
</style>
</head>
<body>
<div class="container">
<h1>Compteur de Score</h1>
<div id="score">0</div>
<button id="increment-btn">Cliquez ici pour +1</button>
</div>
<script>
let score = 0;
const scoreDisplay = document.getElementById('score');
const incrementBtn = document.getElementById('increment-btn');
incrementBtn.addEventListener('click', () => {
score++; // Augmente le score
scoreDisplay.textContent = score; // Met à jour l'affichage
});
</script>
</body>
</html>